<template>
  <div class="main">
    <Transition name="content">
      <div style="margin-top: -200px;">
        <h3>{{ dateTips }}</h3>
        <n-divider />
        <p class="line">不积跬步，无以至千里。不积小流，无以成江海。</p>
        <p class="line">《劝学篇》—— <em>荀子</em></p>
        <n-divider />
        <div class="router-btn">
          <span @click="router.push('/home')">开启美食之旅 🐱‍👤</span>
          <span @click="router.push('/register')">还没有帐号？去注册🍔</span>
          <span @click="router.push('/login')">去登录 🥩</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const dateTips = computed(() => {
  let date = new Date();
  if (date.getHours() >= 0 && date.getHours() < 12) {
    return "上午好"
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午好"
  } else {
    return "晚上好"
  }
})
</script>

<style lang="scss" scoped>
.content-enter-active {
  animation: fadeIn 0.5s;
}

.content-leave-active {
  animation: fadeOut 0.5s;
}

.main {
  width: 100vw;
  height: 100vh;
  // background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  background: url('@/assets/img/wallpaper.jpg') no-repeat;
  background-size: cover;

  p {
    text-align: center;
  }
}

.line {
  font: bold 100% Consolas, Monaco, monospace;
  // border-right: 0.1em solid;
  width: 45ch;
  margin: 2em 1em;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 5s steps(45, end),
    cursor-blink 0.3s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes cursor-blink {
  50% {
    border-color: transparent;
  }
}

.router-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  span {
    cursor: pointer;
    color: white;
    text-decoration: underline;
  }
}</style>
